import React from 'react'
import {Table, Modal, Transfer, Popconfirm, Divider} from 'antd'
import {FormattedMessage} from 'react-intl'

export default class TutorList extends React.Component {
  state = {
    visible: false,
    tutor: {}
  }

  handleSearchTutorStudents(tutor) {
    this.props.getMyStudents(tutor.id)
    this.setState({visible: true, tutor})
  }

  handleChange(nextTargetKeys, direction, moveKeys) {
    const {tutor} = this.state
    if (direction === 'right') {
      this.props.follow(this.props.programId, tutor.id, moveKeys.join(','));
    } else {
      this.props.unFollow(this.props.programId, tutor.id, moveKeys.join(','));
    }
  }
  removeFromProgram(id,type) {
    this.props.removeFromProgram(id, type)
  }

  render() {
    const columns = [{
      title: 'ID',
      dataIndex: 'id',
    }, {
      title: <FormattedMessage id='姓名'/>,
      dataIndex: 'name',
    }, {
      title: <FormattedMessage id='用户名'/>,
      dataIndex: 'username',
    }, {
      title: <FormattedMessage id='手机号'/>,
      dataIndex: 'mobilePhone',
    }, {
      title: <FormattedMessage id='邮箱'/>,
      dataIndex: 'email',
    }, {
      title: 'action',
      dataIndex: 'action',
      render: (text, record) => {
        return <span>
                  <a onClick={this.handleSearchTutorStudents.bind(this, record)}><FormattedMessage id='我的学员'/></a>
                  <Divider type="vertical"/>
                  <Popconfirm title="Are you sure remove this user?"
                              onConfirm={this.removeFromProgram.bind(this, record.id, 'tutor')}>
                      <a><FormattedMessage id='移除该训练营'/></a>
                  </Popconfirm>
              </span>

      }
    }];
    let {tutors, students, tutorStudents} = this.props
    const {tutor, visible} = this.state
    const tutorName = tutor.name ? tutor.name : tutor.username
    const tutorStudentIds = tutorStudents.map(item => item.studentId)
    students = students.map(item => {
      const {id, name, username} = item
      return {key: id, name: name ? name : username}
    })
    return <div>
      <Table
        dataSource={tutors}
        columns={columns}
        bordered/>
      <Modal
        width={580}
        visible={visible}
        title={`${tutorName}`}
        footer={null}
        onCancel={() => this.setState({visible: !visible})}>
        <Transfer
          className='transfer-modal'
          showSearch
          dataSource={students}
          operations={[<FormattedMessage id='添加关注'/>, <FormattedMessage id='移除关注'/>]}
          titles={[<FormattedMessage id='未关注的学员'/>, <FormattedMessage id='关注的学员'/>]}
          targetKeys={tutorStudentIds}
          render={item => item.name}
          onChange={this.handleChange.bind(this)}
        />
      </Modal>
    </div>
  }
}
